<template>
  <div class="comment-list">
    <el-button @click="batchIntoMessageArray()" type="primary" size="small">批量加入消息队列</el-button>
    <el-table ref="commentTable" :data="comments" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="clientId" label="客户端ID" width="150"></el-table-column>
      <el-table-column prop="content" label="内容" width="300"></el-table-column>
      <el-table-column prop="activityTime" label="活动时间" width="200"></el-table-column>
      <el-table-column label="操作" width="150" align="center">
        <template #default="scope">
          <el-button @click="intoMessageArray(scope.row)" type="primary" size="small">加入消息队列</el-button>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      comments: [],
      noteId: null,
      selectedRows:[]
    };
  },
  created() {
    this.noteId = this.$route.params.noteId;
    console.log("参数NoteId为"+this.$route.params.noteId);
    this.fetchComments();
  },
  methods: {
    fetchComments() {
      axios.get('http://localhost:8080/rb/data/getCommentByNoteId', {
        params: {
          noteId: this.noteId
        }
      })
        .then(response => {
          console.log(response.data);
          this.comments = response.data;
        })
        .catch(error => {
          console.error('Error fetching comments:', error);
        });
    },
    handleSelectionChange(selection) {
      this.selectedRows = selection;
      console.log('Selection changed:', selection);
    },
    intoMessageArray(row) {
      const { clientId, activityTime } = row;
      axios.post('http://localhost:8080/rb/data/intoMessageArray', null, {
        params: {
          clientId: clientId,
          activityTime: activityTime
        }
      })
        .then(response => {
          console.log('Comment added to message array successfully:', response.data);
          this.$message.success('评论已加入消息队列');
        })
        .catch(error => {
          console.error('Error adding comment to message array:', error);
          this.$message.error('加入消息队列失败');
        });
    },
    toggleSelection() {
      this.$nextTick(() => {
        const table = this.$refs.commentTable;
        console.log('Table reference:', table); // 检查表格引用是否正确
        if (table) {
          if (this.selectedRows.length === this.comments.length) {
            table.clearSelection();
            console.log('Cleared selection');
          } else {
            table.toggleAllSelection();
            console.log('Toggled all selection');
          }
        } else {
          console.error('Table reference is undefined');
        }
      });
    },
    batchIntoMessageArray() {
      if (this.selectedRows.length === 0) {
        this.$message.warning('请至少选择一条记录');
        return;
      }

      const payload = this.selectedRows.map(row => ({
        clientId: row.clientId,
        activityTime: row.activityTime
      }));

      axios.post('http://localhost:8080/rb/data/intoMessageArrayBatch', payload)
        .then(response => {
          console.log('Comments added to message array successfully:', response.data);
          this.$message.success('评论已批量加入消息队列');
        })
        .catch(error => {
          console.error('Error adding comments to message array:', error);
          this.$message.error('批量加入消息队列失败');
        });
    }
  }
};
</script>

<style scoped>
.comment-list {
  margin: 20px;
}
</style>